<template>
  <div class="credits app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item>
        <el-input v-model="queryParams.id" placeholder="编号" clearable style="width: 100px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.name" placeholder="姓名/手机号" clearable style="width: 100px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryParams.code" placeholder="合同号" clearable style="width: 150px" @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="queryParams.type" placeholder="担保类型" clearable style="width: 100px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="queryParams.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 260px" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"> 搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="state.jobList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" align="center" />
      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="user_name" :show-overflow-tooltip="true" />
      <el-table-column label="合同号" align="center" prop="contract_code" />
      <el-table-column label="申请日期" align="center" prop="create_time" :show-overflow-tooltip="true" />
      <el-table-column label="申请额度" align="center" prop="apply_quota" :show-overflow-tooltip="true"
        ><template #default="scope">
          <div>{{ scope.row.apply_quota }}元</div>
        </template></el-table-column
      >
      <el-table-column label="审批金额" align="center" prop="approval_amount" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.approval_amount == "" ? scope.row.apply_quota : scope.row.approval_amount }}元</div>
        </template>
      </el-table-column>
      <el-table-column label="合同金额" align="center" prop="contract_amount" :show-overflow-tooltip="true" />
      <el-table-column label="担保期限" align="center" prop="loan_stages" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ scope.row.loan_stages }}个月</div>
        </template></el-table-column
      >
      <el-table-column label="担保类型" align="center" prop="loan_type" :show-overflow-tooltip="true">
        <template #default="scope" v-if="active != 3">
          <div>{{ loanTypes(scope.row.loan_type) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="还款方式" align="center" prop="method" :show-overflow-tooltip="true">
        <template #default="scope">
          <div>{{ methodType(scope.row.method) }}</div>
        </template>
      </el-table-column>
      <el-table-column label="放款时间" align="center" prop="loan_time" :show-overflow-tooltip="true" />
      <el-table-column label="放款通道" align="center" prop="channel" :show-overflow-tooltip="true" />
      <el-table-column label="状态" align="center">
        <template #default="scope">
          <div>{{ statusType(scope.row.status) }}</div>
        </template></el-table-column
      >
      <el-table-column label="操作" fixed="right" align="center" width="150px">
        <template #default="scope">
          <el-tooltip content="合同管理" placement="top">
            <el-button type="primary" link icon="Edit" @click="onContract(scope.row)" class="box"></el-button>
          </el-tooltip>

          <div v-if="scope.row.contract_amount">
            <div v-if="scope.row.status == 5">
              <el-tooltip content="提交放款审批" placement="top">
                <el-button type="primary" link icon="Finished" @click="OnApprove(scope.row)" class="box"></el-button>
              </el-tooltip>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page_count" v-model:limit="queryParams.page_size" @pagination="getList" />
  </div>
</template>

<script setup name="Job">
import { loanContractList, loanApprovalSubmit } from "@/api/loanBefore";
import { ElMessage } from "element-plus";
import { statusType, loanTypes, methodType } from "@/utils/dict";
import { reactive, ref } from "vue";
const router = useRouter();
const { proxy } = getCurrentInstance();
import { formatDate } from "@/utils/index.js";
const state = reactive({
  jobList: [],
  tableData: [],
});
const open = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const openView = ref(false);
const openCron = ref(false);
const expression = ref("");
const value2 = ref("");
const props = defineProps({
  active: {
    type: String,
  },
});
const data = reactive({
  queryParams: {
    page_count: 1,
    page_size: 10,
    name: "", //姓名
    phone: "", //电话
    status: "0", //状态
    type: "", //类型
    time: "", //时间
    startTime: "", //开始时间
    endTime: "", //结束时间
    code: "", //合同号
  },
  jobList: {},
});

const ruleForm = reactive({
  text: "", //描述
  name: "", //名称
});

const options = [
  {
    value: "1",
    label: "个人信用",
  },
  {
    value: "2",
    label: "个人分期",
  },
  {
    value: "3",
    label: "个人抵押",
  },
  {
    value: "4",
    label: "企业信用",
  },
  {
    value: "5",
    label: "企业分期",
  },
  {
    value: "6",
    label: "企业租赁",
  },
];

const tableData = [];
const { queryParams, preview } = toRefs(data);

/** 查询定时任务列表 */
function getList() {
  loading.value = true;
  loanContractList(queryParams.value).then((res) => {
    console.log(res, "合同列表");
    if (res.code == 200) {
      state.jobList = res.data.list;
      total.value = res.data.total_page;
      loading.value = false;
    }
  });
}

//合同管理
function onContract(row) {
  router.push({
    path: "contract-contents",
    query: {
      appplyId: row.id,
    },
  });
}

//提交放款审批
function OnApprove(row) {
  console.log(row, "rrrrrrrr");
  loading.value = true;
  proxy.$modal
    .confirm("请确认担保合同准确无误?是否继续")
    .then(() => {
      console.log(row, "rowrowrow");
      loanApprovalSubmit(row.id).then((res) => {
        console.log(res, "提交放款审批");
        if (res.code == 200) {
          ElMessage({
            message: res.msg,
            type: "success",
          });
          loading.value = false;
          getList();
        }
      });
    })
    .catch(() => {
      loading.value = false;
    });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.page_count = 1;
  if (queryParams.value.time && queryParams.value.time.length > 0) {
    queryParams.value.startTime = formatDate(queryParams.value.time[0]);
    queryParams.value.endTime = formatDate(queryParams.value.time[1]);
  }
  getList();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.jobId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    "monitor/job/export",
    {
      ...queryParams.value,
    },
    `job_${new Date().getTime()}.xlsx`
  );
}

getList();
</script>
<style lang="scss" scoped>
.statusStyle {
  color: #ff0000;
}
:deep(.el-dialog) {
  height: 100px;
}
.pagination-container {
  height: 56px;
  margin-top: 15px;
}
.box {
  cursor: pointer;
}
</style>
